<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>前端开发 eject 术语及相关技术探究 - 树朾的开源技术分享</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="开源, 分享">
  <meta name="description" content="在前端开发中，eject 是一个术语，最初由 Crea...">
  <meta name="author" content="scwang90">
  <link rel="icon" href="/images/icons/favicon.ico">
  
  
  
  
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1445822_p6ry5n7lrr.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      loading: {
        gif: '/images/theme/loading.gif',
        lottie: ''
      },
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: {
          gif: '/images/theme/loading.gif',
          lottie: ''
        }
      },
      donate: {
        enable: false,
        alipay: '/images/donate/pay_alipay.jpg',
        wechat: '/images/donate/pay_wxpay.jpg',
        tencent: '/images/donate/pay_tencent.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: true,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: false,
        path: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 6.2.0"></head>

<body class="lock-screen">
  <div class="loading" id="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
        <i class="iconfont iconqrcode j-navbar-qrcode"></i>
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
    </div>
    <div class="center">前端开发 eject 术语及相关技术探究</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
      <div id="qrcode-navbar"></div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 摄影</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    
      <div class="row container container-lg">
        <div class="col-xl-2"></div>
        <div class="col-xl-8"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">前端开发 eject 术语及相关技术探究</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>七月 12, 2024</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>3873</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content article-entry">
        
          
        
        <h2 id="前端开发-eject-术语及相关技术探究"><a href="#前端开发-eject-术语及相关技术探究" class="headerlink" title="前端开发 eject 术语及相关技术探究"></a>前端开发 eject 术语及相关技术探究</h2><p>在前端开发中，<code>eject</code> 是一个术语，最初由 Create React App（CRA）引入，用来描述将项目中的隐藏配置文件暴露出来的过程。具体来说，<code>eject</code> 允许开发者将工具的所有配置文件从一个封装好的状态中提取出来，使它们可以直接编辑和定制。虽然这种方式提供了极大的灵活性，但也带来了复杂性和维护负担，因为开发者需要自己管理和更新这些配置。</p>
<p>在 Vue CLI 中，<code>eject</code> 也是类似的概念，指的是将内置的配置文件暴露出来，以便开发者可以直接修改。例如，Vue CLI 使用一些默认的 Webpack 配置，这些配置通常对大多数项目都是足够的，并且开发者不需要接触或修改这些配置。但如果某些特定需求无法通过 Vue CLI 提供的配置覆盖（如 <code>vue.config.js</code>）来实现，开发者可能需要使用 <code>eject</code> 将这些配置文件提取出来进行更详细的调整。</p>
<p>不过，Vue CLI 提供了一种不需要 <code>eject</code> 的方式来调整配置。这意味着你可以通过 <code>vue.config.js</code> 文件，或者通过配置插件来修改和扩展默认配置，而不需要将所有配置文件显式暴露出来。这种方式既保持了工具的简单性和一致性，也提供了足够的灵活性来满足不同项目的需求。</p>
<p>简而言之，在 Vue CLI 中，<code>无需 eject</code> 强调了你可以在不需要暴露和手动管理所有配置文件的情况下，灵活地调整项目配置，享受更好的开发体验。</p>
<h2 id="eject-方法和-不需要-eject-的方法的区别"><a href="#eject-方法和-不需要-eject-的方法的区别" class="headerlink" title="eject 方法和 不需要 eject 的方法的区别"></a>eject 方法和 不需要 eject 的方法的区别</h2><p>在 Vue CLI 项目中，“eject” 方法和“不需要 eject”的方法的区别在于配置文件的处理和管理方式。以下将详细展示这两种方法的具体操作和区别：</p>
<h3 id="使用-eject-方法"><a href="#使用-eject-方法" class="headerlink" title="使用 eject 方法"></a>使用 eject 方法</h3><p>假设 Vue CLI 提供了一个类似于 <code>eject</code> 的功能（尽管实际上 Vue CLI 并没有提供这样的命令），其操作步骤可能如下：</p>
<ol>
<li><p><strong>运行 eject 命令</strong>：通过 CLI 运行 <code>vue eject</code>（假设有此命令）。</p>
 <figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue eject</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>暴露配置文件</strong>：这个命令会生成一系列的配置文件，例如 <code>webpack.config.js</code>，并将它们暴露在项目根目录下。</p>
</li>
<li><p><strong>手动修改配置文件</strong>：开发者可以直接编辑这些配置文件。例如，你可能会看到一个 <code>webpack.config.js</code> 文件，你可以手动添加或修改各种 Webpack 配置。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 你的自定义配置</span></span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">    <span class="attr">rules</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">        <span class="attr">loader</span>: <span class="string">&#x27;vue-loader&#x27;</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 更多配置...</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="使用不需要-eject-的方法"><a href="#使用不需要-eject-的方法" class="headerlink" title="使用不需要 eject 的方法"></a>使用不需要 eject 的方法</h3><p>Vue CLI 提供了一种更简便、更灵活的方式来调整配置，无需暴露和手动管理所有配置文件。通过 <code>vue.config.js</code> 文件，你可以覆盖默认配置或扩展现有配置。</p>
<ol>
<li><p><strong>创建或编辑 <code>vue.config.js</code> 文件</strong>：在项目根目录下创建一个 <code>vue.config.js</code> 文件（如果还没有的话）。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 覆盖默认的 Webpack 配置</span></span><br><span class="line">  <span class="attr">configureWebpack</span>: &#123;</span><br><span class="line">    <span class="attr">module</span>: &#123;</span><br><span class="line">      <span class="attr">rules</span>: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">          <span class="attr">loader</span>: <span class="string">&#x27;vue-loader&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">// 更多配置...</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 添加或修改其他配置</span></span><br><span class="line">  <span class="attr">devServer</span>: &#123;</span><br><span class="line">    <span class="attr">proxy</span>: <span class="string">&#x27;http://localhost:4000&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>使用 <code>chainWebpack</code> 进一步自定义配置</strong>：如果需要更细粒度的控制，可以使用 <code>chainWebpack</code> 函数。</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">chainWebpack</span>: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    config.<span class="property">module</span></span><br><span class="line">      .<span class="title function_">rule</span>(<span class="string">&#x27;vue&#x27;</span>)</span><br><span class="line">      .<span class="title function_">use</span>(<span class="string">&#x27;vue-loader&#x27;</span>)</span><br><span class="line">      .<span class="title function_">loader</span>(<span class="string">&#x27;vue-loader&#x27;</span>)</span><br><span class="line">      .<span class="title function_">tap</span>(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 修改 vue-loader 选项</span></span><br><span class="line">        <span class="keyword">return</span> options;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 更多链式配置...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="对比总结"><a href="#对比总结" class="headerlink" title="对比总结"></a>对比总结</h3><ul>
<li><p><strong>Eject 方法</strong>：</p>
<ul>
<li><strong>优点</strong>：完全控制所有配置文件。</li>
<li><strong>缺点</strong>：增加了复杂性和维护成本，需要手动管理所有配置文件，难以跟随工具的更新。</li>
</ul>
</li>
<li><p><strong>不需要 Eject 的方法</strong>：</p>
<ul>
<li><strong>优点</strong>：简单、灵活，使用 <code>vue.config.js</code> 文件即可调整配置，保留了 CLI 工具的易用性和一致性。</li>
<li><strong>缺点</strong>：在某些非常特殊的情况下，可能无法完全满足所有自定义需求（但这种情况很少见）。</li>
</ul>
</li>
</ul>
<p>总体来说，Vue CLI 的设计理念是让开发者在不需要暴露所有底层配置的情况下，依然能够灵活地调整项目配置，享受更好的开发体验。</p>
<h2 id="configureWebpack-和-chainWebpack-同时使用"><a href="#configureWebpack-和-chainWebpack-同时使用" class="headerlink" title="configureWebpack 和 chainWebpack 同时使用"></a>configureWebpack 和 chainWebpack 同时使用</h2><p><code>vue.config.js</code> 中可以同时定义这两个配置选项，它们将共同作用于 Webpack 配置。</p>
<ul>
<li><code>configureWebpack</code>：这是一个对象或函数，用于直接覆盖或合并默认的 Webpack 配置。它更适合简单的配置覆盖和合并。</li>
<li><code>chainWebpack</code>：这是一个函数，使用 <code>webpack-chain</code> 提供的链式 API 进行配置。它更适合需要对 Webpack 配置进行细粒度修改的情况。</li>
</ul>
<p>以下是一个示例，展示如何在 <code>vue.config.js</code> 中同时使用 <code>configureWebpack</code> 和 <code>chainWebpack</code>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue.config.js</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="comment">// 使用 configureWebpack 进行简单的配置覆盖或合并</span></span><br><span class="line">  <span class="attr">configureWebpack</span>: &#123;</span><br><span class="line">    <span class="comment">// 直接合并到 Webpack 配置中的对象</span></span><br><span class="line">    <span class="attr">resolve</span>: &#123;</span><br><span class="line">      <span class="attr">alias</span>: &#123;</span><br><span class="line">        <span class="string">&#x27;@components&#x27;</span>: <span class="string">&#x27;@/components&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">plugins</span>: [</span><br><span class="line">      <span class="comment">// 示例插件配置</span></span><br><span class="line">      <span class="keyword">new</span> <span class="title class_">MyCustomWebpackPlugin</span>()</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 使用 chainWebpack 进行更细粒度的配置</span></span><br><span class="line">  <span class="attr">chainWebpack</span>: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 使用链式 API 修改 Loader 规则</span></span><br><span class="line">    config.<span class="property">module</span></span><br><span class="line">      .<span class="title function_">rule</span>(<span class="string">&#x27;vue&#x27;</span>)</span><br><span class="line">      .<span class="title function_">use</span>(<span class="string">&#x27;vue-loader&#x27;</span>)</span><br><span class="line">      .<span class="title function_">tap</span>(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 修改 vue-loader 选项</span></span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          ...options,</span><br><span class="line">          <span class="attr">compilerOptions</span>: &#123;</span><br><span class="line">            <span class="attr">preserveWhitespace</span>: <span class="literal">false</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 添加新的插件</span></span><br><span class="line">    config.<span class="title function_">plugin</span>(<span class="string">&#x27;html&#x27;</span>)</span><br><span class="line">      .<span class="title function_">tap</span>(<span class="function"><span class="params">args</span> =&gt;</span> &#123;</span><br><span class="line">        args[<span class="number">0</span>].<span class="property">title</span> = <span class="string">&#x27;My Vue App&#x27;</span>;</span><br><span class="line">        <span class="keyword">return</span> args;</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 其他链式配置...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>在这个示例中：</p>
<ul>
<li><code>configureWebpack</code> 用于添加别名和自定义插件。</li>
<li><code>chainWebpack</code> 用于修改 <code>vue-loader</code> 的选项和 HTML 插件的配置。</li>
</ul>
<p>这两者的配置会被 Vue CLI 合并，形成最终的 Webpack 配置。<code>configureWebpack</code> 和 <code>chainWebpack</code> 的顺序不会冲突，可以根据需要灵活地进行配置。</p>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>scwang90</li>
    <li><strong>本文链接：</strong><a href="https://blog.scwang90.cn/2024/07/12/vue-cli-eject/index.html" title="https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;07&#x2F;12&#x2F;vue-cli-eject&#x2F;index.html">https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;07&#x2F;12&#x2F;vue-cli-eject&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本分享所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/cli/" rel="tag">cli</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/eject/" rel="tag">eject</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/" rel="tag">vue</a></li></ul> 

        
  <nav class="nav">
    <a href="/2024/08/02/breakthrough-css/"><i class="iconfont iconleft"></i>CSS 难点攻克</a>
    <a href="/2024/07/12/html5-new-tags/">HTML5 新标签概述<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
        <div class="col-xl-2">
          
            
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91-eject-%E6%9C%AF%E8%AF%AD%E5%8F%8A%E7%9B%B8%E5%85%B3%E6%8A%80%E6%9C%AF%E6%8E%A2%E7%A9%B6"><span class="toc-text">前端开发 eject 术语及相关技术探究</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#eject-%E6%96%B9%E6%B3%95%E5%92%8C-%E4%B8%8D%E9%9C%80%E8%A6%81-eject-%E7%9A%84%E6%96%B9%E6%B3%95%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">eject 方法和 不需要 eject 的方法的区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-eject-%E6%96%B9%E6%B3%95"><span class="toc-text">使用 eject 方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E4%B8%8D%E9%9C%80%E8%A6%81-eject-%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-text">使用不需要 eject 的方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E6%AF%94%E6%80%BB%E7%BB%93"><span class="toc-text">对比总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#configureWebpack-%E5%92%8C-chainWebpack-%E5%90%8C%E6%97%B6%E4%BD%BF%E7%94%A8"><span class="toc-text">configureWebpack 和 chainWebpack 同时使用</span></a></li></ol>
  </aside>

          
        </div>
      </div>
    
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=283371828 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://github.com/scwang90 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:scwang90@hotmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>





  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>






  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>